<template>
  <div class="roleList">
    <searchForm ref="searchForm" :keys="['name']" @on-search="handlerSearch" @after-op="getRolesByCriteria"></searchForm>
    <div class="table">
      <el-table
          v-loading="loading"
          :height="'calc(100% - 0px)'"
          :header-cell-style="{background:'#F8F9FA'}"
          :data="tableData">
        <el-table-column
            prop=""
            width="120"
            label="">
        </el-table-column>
        <el-table-column
            prop="name"
            label="角色名称">
        </el-table-column>
        <el-table-column
            label="操作"
            prop="操作">
          <template slot-scope="scope">

            <editRoleBtn :params="scope.row" @after-op="afterOp"></editRoleBtn>
            <el-button type="danger" size="small" @click="goDelete(scope.row)">删除</el-button>
            <showRoleUserBtn :params="scope.row"></showRoleUserBtn>
            <permissitonBtn :params="scope.row"></permissitonBtn>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination :page="pageInfo.page" :pageSize="pageInfo.pageSize" :total="pageInfo.total" @handleSizeChange="pageSizeChange"
                @pageChange="pageChange"></pagination>

  </div>
</template>

<script>
import searchForm from "./searchForm";
import pagination from "../../../../components/pagination";
import roleForm from "./roleForm";
import showRoleUserBtn from "@/views/systemManage/role/module/showRoleUserBtn";
import permissitonBtn from "@/views/systemManage/role/module/permissitonBtn";
import editRoleBtn from "@/views/systemManage/role/module/editRoleBtn";
export default {
  name: "roleList",
  components: {
    searchForm,
    pagination,
    roleForm,
    showRoleUserBtn,
    permissitonBtn,
    editRoleBtn
  },
  mounted() {
    this.getRolesByCriteria();
  },
  methods: {
    afterOp(){
      this.getRolesByCriteria();
    },
    goDelete(row) {
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        let params = {id: row.id}
        this.$api.delRoles(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getRolesByCriteria();
        })
      }).catch(() => {
      });
    },
    pageSizeChange(size){
      this.pageInfo.pageSize = size
      this.getRolesByCriteria();
    },
    pageChange(page) {
      this.pageInfo.page = page
      this.getRolesByCriteria();
    },
    handlerSearch() {
      this.pageInfo.page = 1
      this.getRolesByCriteria();
    },
    getRolesByCriteria() {
      this.loading = true
      let params = {
        page: this.pageInfo.page - 1,
        pageSize: this.pageInfo.pageSize,
        ...this.$refs.searchForm.form
      }
      this.$api.getRolesByCriteria(params).then(res => {
        this.tableData = res.data.data
        this.pageInfo.total = res.data.recordsTotal
        this.loading = false
      })
    }
  },
  data() {
    return {
      tableData: [],
      dialogVisible:false,
      loading:false,
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    }
  }
}
</script>

<style scoped lang="less">
.roleList {
  //width: calc(100% - 140px);
  flex: 1;
  height: 100%;
  .table {
    padding: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 160px);
  }
}
</style>